<template>
  <a-form
    :label-col="{ span: 1 }"
    :wrapper-col="{ span: 23 }"
    autocomplete="off"
    labelAlign="left"
  >
    <a-form-item label="学校">
      <a-textarea
        v-model:value="formValue.school"
        placeholder=""
        :auto-size="{ minRows: 5, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="公交">
      <a-textarea
        v-model:value="formValue.bus"
        placeholder=""
        :auto-size="{ minRows: 5, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="医院" extra="">
      <a-textarea
        v-model:value="formValue.hospital"
        placeholder=""
        :auto-size="{ minRows: 5, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item label="生活" extra="">
      <a-textarea
        v-model:value="formValue.live"
        placeholder=""
        :auto-size="{ minRows: 5, maxRows: 5 }"
      />
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
} from "vue";

import { copyObjVal } from "@/utils/common";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
dayjs.locale("zh-cn");

import AreaSelector from "@/components/area/threeAreaSelector/index.vue";

export default defineComponent({
  components: { AreaSelector },
  setup(props, context) {
    const areaSelector = ref();

    const formValue = ref({
      school: "",
      bus: "",
      hospital: "",
      live: "",
    } as any);

    const getData = () => {
      let target = {};
      copyObjVal(formValue.value, target);
      return target;
    };

    return {
      formValue,
      areaSelector,
      getData,
    };
  },
});
</script>
